<template>
  <div class="top">
    <div class="top__bgcolor"></div>
    <div class="top__header">
      <Back />
      <p class="top__header__title">确认订单</p>
    </div>
    <div class="top__receiver">
      <p class="top__receiver__title">收获地址</p>
      <p class="top__receiver__site">
        <span>北京理工大学国防科技园2号楼10层</span>
        <i class="top__detail__ico iconfont">&#xe748;</i>
      </p>
      <p class="top__receiver__consignee">
        <span>瑶妹（先生）</span> <span>18911024266</span>
      </p>
    </div>
  </div>
</template>

<script>
import Back from "../../components/Back";
export default {
  name: "TopArea",
  components: { Back },
};
</script>

<style lang="scss">
.top .back__ico {
  color: #fff;
}
</style>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.top {
  position: relative;
  width: 100%;
  &__detail__ico {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -0.14rem;
    font-size: 0.28rem;
    color: $content-numcolor;
  }
  &__bgcolor {
    height: 1.59rem;
    margin: 0 -0.18rem;
    background-image: linear-gradient(
      0deg,
      rgba(0, 145, 255, 0) 4%,
      #0091ff 50%
    );
  }
  &__header {
    position: absolute;
    top: 0.245rem;
    margin-bottom: 0.22rem;
    width: 100%;
    &__title {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -0.32rem;
      font-size: 0.16rem;
      color: $content-fzcolor;
      line-height: 0.36rem;
    }
  }
  &__receiver {
    position: relative;
    margin-top: -0.76rem;
    padding: 0.16rem;
    background: $content-fzcolor;
    border-radius: 0.04rem;
    &__title {
      font-size: 0.16rem;
      color: $content-fontcolor;
      line-height: 0.22rem;
      margin-bottom: 0.14rem;
    }
    &__site {
      font-size: 0.14rem;
      color: $content-fontcolor;
      line-height: 0.2rem;
      margin-bottom: 0.06rem;
    }
    &__consignee {
      font-size: 0.12rem;
      color: $content-numcolor;
      line-height: 0.17rem;
    }
  }
}
</style>